<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>书单</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.maintext{
				width: 35%;
				height: 500px;
				border-style: solid;
				border-width: thin;
				margin-top: 100px;
				margin-left:500px ;
			}
			.firsttext{
				width: 100%;
				height: 50px;
				background-color: crimson;
			}
			.secondtext{
				width:width: 100%;
				height: 150px;
			}
			.thirdtext{
				width:width: 100%;
				height: 150px;
			}
			.fouthtext{
				width:width: 100%;
				height: 150px;
			}
			img{
				height: 110px;
				width: 70px;
				margin-top: 20px;
				margin-left: 29px;
				float: left;
			}
			a{
				text-decoration: none;
			}
			dd{
				width: 250px; 
				float: right; 
				margin-top: 60px;
			}
			
		</style>
	</head>
	<body>
		<div class="maintext">
			<div class="firsttext">
				<div style="width: 200px; float: left; margin-top: 15px; margin-left: 32px;">
					<p style="color: white;"><b>外语图书</b></p>
				</div>
				<div style="width: 240px; float: right; margin-top: 15px;">
					<p style="color: white;"><b>销售排行榜</b></p>
				</div>
			</div>
			
			<div class="secondtext">
				<dl>
					<dt><img src="../img/书1.PNG"/ ></dt>
						
					<dd><a href="#" >《Wall Street》</a></dd>
				</dl>
			</div>
			
			<div class="thirdtext">
				<dl>
					<dt><img src="../img/书2.PNG"/ ></dt>
						
					<dd><a href="#"> 《And Then There’s This》</a></dd>
				</dl>
			</div>
			
			<div class="fouthtext">
				<dl>
					<dt><img src="../img/书3.PNG"/ ></dt>
						
					<dd><a href="#"> 《An Ethics Of Interrogation》</a></dd>
				</dl>
			</div>
		</div>
	</body>
</html>
